<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Add Api app</title>
    <link rel="stylesheet" type="text/css" href="/static/css/opp.css"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                $("#load").hide();
                $("#commit").click(function(){
                    $("#load").show();
                    opp_req=$.ajax({type:'post',
                            url:"/add_api_server",
                            data:$("#form").serialize(),
                            success:function (result) {
                                $("#result_show").html(result);
                            },
                            error: function(opp_req, status){
                                if(opp_req && status == 'abort'){
                                    var server= $("#ServerIp").val();
                                    console.log(server);
                                    $.post("/undo_api_server",{'ServerIp':server},function (result) {
                                    $("#result_show").html(result);
                                    })
                                }
                            },
                            complete:function () {
                                $("#load").hide();
                            }
                     })
                });
            $("#undo").click(function () {
                if (typeof (opp_req) !== "undefined"){
                    $("#result_show").html("<p class='ok_res'>操作正在取消..</p>");
                    $("#load").hide();
                    opp_req.abort();

                }else {
                    $("#result_show").html('<p class="error_res">没有要取消的操作！</p>');
                }
            });
        });

/*/------------------------------Web Worker 多线程------------------

        function startWorker() {
            if (typeof (Worker) !== "undefined") {
                worker = new Worker("/static/js/opp.js");
                var sip = $("#ServerIp").val();
                var sname = $("#ServerName").val();
                worker.postMessage({ServerIp:sip,ServerName:sname});
                $("#load").show();
                worker.onmessage = function(event) {
                    console.log(event.data);
                    $("#result_show").html(event.data);
                    $("#load").hide();
                }
            } else {
                $("#result_show").html("Sorry! No Web Worker support.");
            }
            $("#undo").click(function () {
                    var server= $("#ServerIp").val();
                    $.post("/undo_api_server",{'ServerIp':server},function (result) {
                    $("#result_show").html(result);
                    $("#load").hide();
                });
             })
        }

        function stopWorker() {
            var worker = new Worker("/static/js/uopp.js");
            var sip = $("#ServerIp").val();
            worker.postMessage({ServerIp: sip});
            $("#load").show();
            worker.onmessage = function (res) {
                $("#result_show").html(res.data);
                $("#load").hide();
            };

        }
        */

    </script>
</head>
<body>
<div id="title">添加API服务节点</div>
<div id="load">
    <p>Loadding...</p>
    <button id="undo" type="button">Cancel</button>
</div>
<div id="top">
    <form id="form" action="/add_api_server" method="post">
        <table>
            <tr><td>Host ip:</td><td><input id="ServerIp" name="ServerIp"></td></tr>
            <tr><td>Host name:</td><td><input id="ServerName" name="ServerName"></td></tr>
            <tr><td><br/></td></tr>
            <tr><td>
                <button id='commit' type="button">Commit</button></td>
            </tr>
        </table>
    </form>
</div>

<div id="result_show">

</div>
</body>

</html>